<template>
  <i
    v-if="unReadNum"
    :class="[
        isDisturb ? 'isDisturb' : 'isNotify',
        (length > 3 || length === 3) ? 'msg-tip-3' : (length === 2 ? 'msg-tip-2' : ''),
        (length === 1) ? 'msg-tip-1' : ''
    ]"
  >{{ unReadNum > 99 ? '99+' : unReadNum }}</i>
</template>

<script>
export default {
  name: "fyMessageNotify",
  props: {
    unReadNum: {
      type: Number,
      default: 0
    },
    isDisturb: {
      type: Boolean
    }
  },
  data() {
    return {
      length: JSON.stringify(this.unReadNum).length
    };
  },
  watch: {
    isDisturb(newVal) {
      this.isDisturb = newVal
    },
    unReadNum(newVal) {
      this.unReadNum = newVal
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@css/public/reset.scss";
@import "@css/components/messageNotify/fyMessageNotify.scss";
</style>
